<template>
  <div class="step-list">
    <div class="step-item">
      <div class="step-top current">
        <i class="xffont xf-luruxinxi"></i>
      </div>
      <span class="step-bottom">基本信息1</span>
    </div>
    <div class="step-item">
      <div class="step-top current">
        <i class="xffont xf-luruxinxi"></i>
      </div>
      <span class="step-bottom">基本信息2</span>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'xf-step'
  }
</script>
<style lang="scss" scoped>
  @import "../../common/style/_variable.scss";
  .step-list{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: #fff;
    padding: .2rem 0;
    .step-item{
      flex: 1;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      .step-top{
        width: .7rem;
        height: .7rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: .2rem;
        .xffont{
          color: $primary;
          font-size: .4rem;
        }
        &.current{
          color: $primary;
          background: $primary;
          .xffont{
            color: #fff;
          }
        }
      }
      &:not(:last-child){
        position: relative;
      }
      &:before{
        position: absolute;
        height: 2px;
        width: 100%;
        left: 50%;
        top: 50%;
        background: $primary;
      }
    }
  }
</style>
